<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>list</title>
<link rel="stylesheet" type="text/css" href="../styles/easyui.css">
<link rel="stylesheet" type="text/css" href="../styles/icon.css">
<link rel="stylesheet" type="text/css" href="../styles/demo.css">
<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../jquery/jquery.easyui.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="../css/normalize.css" />
<link rel="stylesheet" type="text/css"
	href="../fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../css/demo.css" />
<link rel="stylesheet" type="text/css" href="../css/component.css" />
</head>

<body>

	<div>
		isbn &nbsp:&nbsp<input type="text" name="isbn" id="isbn" /> bookname
		&nbsp:&nbsp<input type="text" name="bookName" id="bookName" /> author
		&nbsp:&nbsp<input type="text" name="author" id="author" /> tag
		&nbsp:&nbsp<input type="text" name="tag" id="tag" />
	</div>
	<br>
	<input type="button" name="submit" id="submit" value="查询" />
	<br>
	<br>
	<br>

	<div class="container">
		<div style="margin: 30px 0;"></div>
		<table id="dg" title="书籍列表" style="width: 770px; height: 360px"
			data-options="rownumbers:true,singleSelect:true,pagination:true,url:'../books/queryrtjson_eu.action',method:'post'">
			<thead>
				<tr>
					<th data-options="field:'isbn',width:80">ISBN</th>
					<th data-options="field:'language',width:60">language</th>
					<th data-options="field:'bookName',width:80,align:'right'">bookName</th>
					<th data-options="field:'author',width:60,align:'right'">author</th>
					<th data-options="field:'publish',width:60">publish</th>
					<th data-options="field:'tag',width:60,align:'center'">tag</th>
					<th data-options="field:'inTime',width:80,align:'center'">inTime</th>
					<!-- <th data-options="field:'lendTime',width:80,align:'center'">lendTime</th>
				<th data-options="field:'deadline',width:80,align:'center'">deadline</th> -->
					<!-- <th data-options="field:'borrower',width:80,align:'center'">borrower</th> -->
					<th data-options="field:'status',width:60,align:'center'">status</th>
					<th data-options="field:'callno',width:60,align:'center'">deadline</th>
					<th data-options="field:'type',width:60,align:'type'">type</th>
					<th data-options="field:'summary',width:80,align:'right'">summary</th>
				</tr>
			</thead>
		</table>

		<script type="text/javascript">
		$(function(){
			var pager = $('#dg').datagrid().datagrid('getPager');	// get the pager of datagrid
			 pager.pagination({
				buttons:[{
					iconCls:'icon-search',
					handler:function(){
						location.href="/jsxt/user/toquery.action" 
						/* alert('search'); */
					}
				},/* {
					iconCls:'icon-add',
					handler:function(){
						 
						 alert('add'); 
					}
				},{
					iconCls:'icon-edit',
					handler:function(){
						alert('edit');
					}
				} */]
			});		 	
		})
	 	 $("#submit").click(function(){ 
	 		$('#dg').datagrid('load',{
	 			"booksModel.isbn": $("#isbn").val(), 
				"booksModel.bookName": $("#bookName").val(), 
				"booksModel.author": $("#author").val(), 
				"booksModel.tag": $("#tag").val()
	 		});
	 		
		}); 
	</script>
	</div>
	>
	<script src="js/classie.js"></script>
	<script>
			(function() {
				// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
				if (!String.prototype.trim) {
					(function() {
						// Make sure we trim BOM and NBSP
						var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
						String.prototype.trim = function() {
							return this.replace(rtrim, '');
						};
					})();
				}

				[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
					// in case the input is already filled..
					if( inputEl.value.trim() !== '' ) {
						classie.add( inputEl.parentNode, 'input--filled' );
					}

					// events:
					inputEl.addEventListener( 'focus', onInputFocus );
					inputEl.addEventListener( 'blur', onInputBlur );
				} );

				function onInputFocus( ev ) {
					classie.add( ev.target.parentNode, 'input--filled' );
				}

				function onInputBlur( ev ) {
					if( ev.target.value.trim() === '' ) {
						classie.remove( ev.target.parentNode, 'input--filled' );
					}
				}
			})();
		</script>

</body>

</html>